<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物界面</title>
</head>
<body>
    <style>
        .SmallfontStyle{
            color: black;
            text-decoration: none;
            font-size: small;
            margin-right: 10px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            }
            .SmallfontStyle:hover{
                color: rgba(255, 0, 0, 0.733);
            }
            .BigfontStyle{
                color: black;
                text-decoration: none;
                font-size: small;
                font-weight: 550;
                margin-right: 14px;
                }
                .BigfontStyle:hover{
                color: rgba(255, 0, 0, 0.733) ;
                }
          .BestfontStyle{
            color:white;
            font-weight:500;
            font-size:small;
            background-color : #050505d5;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            text-decoration: none;
            margin-top: 5px;
            margin-right: 16px;
            margin-left: 15px;
            padding-top: 5px;
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 5px;
          }     
          .BestfontStyle:hover{
           background-color: rgba(255, 0, 0, 0.853);
          }
        .hidden-content1{
            display: none;
            position:fixed;
            top:30%;
            left: 26.7%;
            background-color: rgba(128, 128, 128, 0.113);
            padding: 10px;
            z-index: 10;
            text-decoration: none;
            color: black;
        }
        .trigger-hover1{
            top: 30%;
            left: 25%;
            position: fixed;
            color: black;
            text-decoration: none;
        }
        .trigger-hover1:hover+.hidden-content1{
            display: block;
        }
        .trigger-hover1:hover{
            color:rgba(255, 0, 0, 0.753)
        }
        .hidden-content1:hover{
            display: block;
        }



        .hidden-content2{
           display: none;
            position:fixed;
            top:30%;
            left: 26.7%;
            background-color: rgba(128, 128, 128, 0.113);
            padding: 10px;
            z-index: 10;
            text-decoration: none;
            color: black;
        }
        .trigger-hover2{
            top: 34%;
            left: 25%;
            position: fixed;
            color: black;
            text-decoration: none;
        }
        .trigger-hover2:hover+.hidden-content2{
            display: block;
        }
        .trigger-hover2:hover{
            color:rgba(255, 0, 0, 0.753)
        }
        .hidden-content2:hover{
            display: block;
        }
        .background1{
            background-size: cover;
            background-position: center center;
            position: fixed;
            width: 100%;
            height: 100%;
            margin-top: 12%;
            background-color:rgba(128, 128, 128, 0.113);
            background-repeat: no-repeat;
            z-index: 1;
        }
        .background2{
            background-size: cover;
            background-position: center center;
            position: fixed;
            width: 100%;
            height: 100%;
            margin-top:0%;
            margin-right: 50%;
            margin-left: 20%;
            background-color:white;
            background-repeat: no-repeat;
            z-index: 0;
        }
        .searchBox{
            border-radius: 6px 0 0 6px;
            height: 5.5%;
            width: 30%;
            outline: none;
            border: 1.5px,solid,red;
            left: 30%;
            top:7%;
            background-color:white;
           position: fixed;
          font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
          
        }
        .searchButton{
            height:5.5%;
            width:5%;
            left:59.88%;
            top:7%;
            position:fixed;
            border: 1.5px,solid,red;
            background-color:white;
            border-radius: 0 6px 6px 0;
            cursor: pointer;
        }
        button:hover{
            background-color:rgba(0, 0, 0, 0.068)
        }
        .searchImg{
            height:3.5%;
            width:2%;
            left:61.40%;
            top:8.20%;
            position:fixed;
            opacity: 0.6;
        }
        .tbLog{
            height:12%;
            width:18%;
            left:10%;
            top:3.5%;
            position: fixed;
        }
        .itemPhone{
            height: 15%;
            top: 35%;
            left:2%;
            position:fixed;
        }
       .btn1{
            top: 19%;
            left:20%;
            position:fixed;
            font-weight: 500;
            color: black;
            text-decoration: none;
       }
       .btn1:hover{
        color: rgba(255, 0, 0, 0.784);
       }
       .btn2{
            top: 19%;
            left:28%;
            position:fixed;
            color: black;
            text-decoration: none;
           
       }
       .btn2:hover{
        color: rgba(255, 0, 0, 0.784);
       }
       .btn3{
            top: 19%;
            left:36%;
            position:fixed;
            font-weight: 500;
            color: black;
            text-decoration: none;
            
       }
       .btn3:hover{
        color: rgba(255, 0, 0, 0.784);
       }
       .btn4{
            top: 19%;
            left:44%;
            position:fixed;
            font-weight: 500;
            color: black;
            text-decoration: none;
           
       }
       .btn4:hover{
        color: rgba(255, 0, 0, 0.784);
       }
       .btn5{
            top: 19%;
            left:52%;
            position:fixed;
            font-weight: 500;
            color: black;
            text-decoration: none;
       }
       .btn5:hover{
        color: rgba(255, 0, 0, 0.784);
       }
       .btn6{
            top: 19%;
            left:60%;
            position:fixed;
            font-weight: 500;
            color: black;
            text-decoration: none;
       }
       .btn6:hover{
        color: rgba(255, 0, 0, 0.784);
       }
       .btn7{
            top: 19%;
            left:68%;
            position:fixed;
            font-weight: 500;
            color: black;
            text-decoration: none;
       }
       .btn7:hover{
        color: rgba(255, 0, 0, 0.784);
       }
       .btn8{
            top: 19%;
            left:76%;
            position:fixed;
            font-weight: 500;
            color: black;
            text-decoration: none;
       }
       .btn8:hover{
        color: rgba(255, 0, 0, 0.784);
       }
       .line{
        top:24%;
        width: 100%;
        position: fixed;
       }
       input::placeholder{
        text-indent: 5px;
        font-size: 100%;
       }
       .tuijian{
        height: 20%;
        position: fixed;
        top: 20%;
        left: 4.5%;
       }
       .pricePhone{
        font-weight: 550;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size:small;
        position: fixed;
        top:51%;
        left:4.25%;
        color: red;
       }
       .priceJianpan{
        font-weight: 550;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size:small;
        position: fixed;
        top:51%;
        left:11.5%;
        color: red;
       }
       .itemJianpan{
        height: 15%;
        top: 35%;
        left:9%;
        position:fixed;
       }
       .itemCamera{
        height: 15%;
        top: 54%;
        left: 2%;
        position:fixed;
       }
       .priceCamera{
        font-weight: 550;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size:small;
        position: fixed;
        top:70%;
        left:4.25%;
        color: red;
       }
    </style>
    <div class="background1">
    <input type="search"id="search-box" placeholder="搜索" class="searchBox">
    <button class="searchButton">
        <img src="searchImg.webp" alt="搜索" class="searchImg">
    </button>
    <img src="https://img.alicdn.com/imgextra/i3/O1CN01LvV0d41fjkGWg6iN6_!!6000000004043-2-tps-480-144.png" alt="淘宝网" class="tbLog">

        <a target="_blank"  href="https://item.jd.com/10095070719878.html"title="nubia 努比亚Z60 Ultra 屏下摄像12GB+256GB 星曜 第三代骁龙8 三主摄OIS 5G手机游戏拍照 努比亚手机">
    <div>
        <img src="Phone.jpg" alt="手机" class="itemPhone">
        <b class="pricePhone"title="nubia 努比亚Z60 Ultra 屏下摄像12GB+256GB 星曜 第三代骁龙8 三主摄OIS 5G手机游戏拍照 努比亚手机">¥3999</b>
    </div>
        </a>
        <a target="_blank" href="https://item.jd.com/10058506821465.html">
    <div>
        <img src="键盘.jpg" alt="前行者键盘"class="itemJianpan"title="前行者 键盘 金属黑">
        <b class="priceJianpan"title="前行者 键盘 金属黑">¥199</b>
    </div>
        </a>
        <a target="_blank" href="">
    <div>
        <img src="相机.jpg" alt="索尼相机"class="itemCamera"title="索尼 /Sony a5000 a5100 a6000 a6300 a6400 a6500微单相机">
        <b class="priceCamera"title="索尼 /Sony a5000 a5100 a6000 a6300 a6400 a6500微单相机">¥3199</b>
    </div>        
        </a>
        <img src="tuijian.jpg" alt="推荐"class="tuijian">
        <a target="_blank" href="" class="btn1">全民奥运季</a>
        <a target="_blank" href="" class="btn2">七夕节好礼</a>
        <a target="_blank" href="" class="btn3">电脑数码</a>
        <a target="_blank" href="" class="btn4">企业会员</a>
        <a target="_blank" href="" class="btn5">周边商城</a>
        <a target="_blank" href="" class="btn6">官方商城</a>
        <a target="_blank" href="" class="btn7">生鲜优选</a>
        <a target="_blank" href="" class="btn8">购物好礼</a>
        <hr class="line">
        <div class="background2"></div>
        <a href=""class="trigger-hover1">数码产品</a>
        <dd class="hidden-content1">
            <a href=""class="BestfontStyle">网上营业厅 ></a>
            <a href=""class="BestfontStyle">手机旗舰店 ></a>
            <a href=""class="BestfontStyle">运营商 ></a>
            <a href=""class="BestfontStyle">手机配件城 ></a>
           <br>
           <br>
            <a href=""class="BigfontStyle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机 ></a>
            <a href=""class="SmallfontStyle">游戏手机</a>
            <a href=""class="SmallfontStyle">拍照手机</a>
            <a href=""class="SmallfontStyle">全面屏手机</a>
            <a href=""class="SmallfontStyle">高端旗舰手机</a>
            <a href=""class="SmallfontStyle">学生手机</a>
            <a href=""class="SmallfontStyle">性价比手机</a>
            <a href=""class="SmallfontStyle">老年手机</a>
            <a href=""class="SmallfontStyle">二手手机</a>
            <a href=""class="SmallfontStyle">手机回收</a>
            <br>
            <a href=""class="SmallfontStyle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
            <a href=""class="SmallfontStyle">曲面屏手机</a>
            <a href=""class="SmallfontStyle">合约机</a>
            <a href=""class="SmallfontStyle">手机维修</a>
            <a href=""class="SmallfontStyle">手机质保</a>
            <br>
            <br>
            <a href=""class="BigfontStyle">摄影摄像 ></a>
            <a href=""class="SmallfontStyle">运动相机</a>
            <a href=""class="SmallfontStyle">数码相机</a>
            <a href=""class="SmallfontStyle">单反相机</a>
            <a href=""class="SmallfontStyle">微反相机</a>
            <a href=""class="SmallfontStyle">摄像机</a>
            <a href=""class="SmallfontStyle">影棚器材</a>
            <a href=""class="SmallfontStyle">户外器材</a>
            <a href=""class="SmallfontStyle">数码相框</a>
            <a href=""class="SmallfontStyle">微型摄像机</a>
            <a href=""class="SmallfontStyle">摄像头</a>
            <br>
            <br>
            <a href=""class="BigfontStyle">智能设备 ></a>
            <a href=""class="SmallfontStyle">电话手表</a>
            <a href=""class="SmallfontStyle">运动手表</a>
            <a href=""class="SmallfontStyle">智能手环</a>
            <a href=""class="SmallfontStyle">XR设备</a>
            <a href=""class="SmallfontStyle">智能机器人</a>
            <a href=""class="SmallfontStyle">VR/AR设备</a>
            <a href=""class="SmallfontStyle">无人机</a>
            <a href=""class="SmallfontStyle">遥控设备</a>
            <a href=""class="SmallfontStyle">智能儿童手表</a>
            <a href=""class="SmallfontStyle">智能家居</a>
            <br>
            <a href=""class="SmallfontStyle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能监控设备</a>
            <a href=""class="SmallfontStyle">健康检测</a>
            <br>
            <br>
            <a href=""class="BigfontStyle">手机配件 ></a>
            <a href=""class="SmallfontStyle">手机钢化膜</a>
            <a href=""class="SmallfontStyle">手机壳</a>
            <a href=""class="SmallfontStyle">手机储存卡</a>
            <a href=""class="SmallfontStyle">数据线</a>
            <a href=""class="SmallfontStyle">充电头</a>
            <a href=""class="SmallfontStyle">手机支架</a>
            <a href=""class="SmallfontStyle">挂饰</a>
            <a href=""class="SmallfontStyle">手机电池</a>
            <a href=""class="SmallfontStyle">手机屏幕</a>
            <a href=""class="SmallfontStyle">金属配件</a>
            <a href=""class="SmallfontStyle">手机维修</a>
            <br>
            <br>
            <a href=""class="BigfontStyle">影音设备 ></a>
            <a href=""class="SmallfontStyle">有线耳机</a>
            <a href=""class="SmallfontStyle">无线耳机</a>
            <a href=""class="SmallfontStyle">MP3/MP4</a>
            <a href=""class="SmallfontStyle">四六级听力耳机</a>
            <a href=""class="SmallfontStyle">收音机</a>
            <a href=""class="SmallfontStyle">直播设备</a>
            <a href=""class="SmallfontStyle">音频线</a>
            <a href=""class="SmallfontStyle">音响</a>
            <a href=""class="SmallfontStyle">有限/蓝牙音箱</a>
        </dd>
        <a href=""class="trigger-hover2">家具</a>
        <dd class="hidden-content2">
            <a href=""class="BestfontStyle">家具城 ></a>
            <a href=""class="BestfontStyle">家电馆 ></a>
            <br>
            <br>
            <a href=""class="BigfontStyle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空调 ></a>
            
        </dd>
</div>
</body>
</html>
